{% extends "_layouts/index.html" -%}

{% block search -%}
{{ search::input(name="title", title="标题", value=title)}}
{{ search::input(name="remark", title="备注", value=remark)}}
{{ search::range_date(name="created", title="添加时间", value_start=created_start, value_end=created_end)}}
{{ search::range_date(name="updated", title="修改时间", value_start=updated_start, value_end=updated_end)}}
{{ search::range_number(name="duration", title="时长(秒)", value_start=duration_start, value_end=duration_end)}}
{% endblock search -%}

{% block options -%}
{{option::delete_all()}} {{option::add(height=650)}}
{% endblock options -%}

{% block content -%}
    <table class="layui-table layui-form">
    <thead>
        <tr>
            <th style="width: 40px"> <input type="checkbox" name=""  lay-skin="primary"> </th>
            <th class="row-id">编号</th>
            <th>标题</th>
            <th>备注</th>
            <th>作者</th>
            <th>封面</th>
            <th>时长(秒)</th>
            <th>排序</th>
            <th>状态</th>
            <th>是否推荐</th>
            <th>操作</th>
        </tr>
        <tbody>
        {% for r in records -%}
        <tr>
            <td> <input type="checkbox" name=""  lay-skin="primary"> </td>
            <td>{{r.id}}</td>
            <td>{{r.title}}</td>
            <td>{{r.remark}}</td>
            <td>{{r.author_id|author_name}}
            <td><a href="#" link="{{r.cover_image}}" class="record-img" style="color: blue">点击查看</a></td>
            <td>{{r.duration}}</td>
            <td>{{r.seq}}</td>
            <td>{{r.state|state_name}}</td>
            <td>{{r.is_recommended|yes_no}}</td>
            <td class="td-manage"> {{option::update(id=r.id, height=550)}} | {{option::delete(id=r.id)}} </td>
        </tr>
        {% endfor -%}
        </tbody>
    </thead>
    </table>
<script>
layui.use(['jquery'], function() { 
    var $ = layui.jquery;
    $(".record-img").click(function() { // 显示图片
        var that = $(this);
        var img_url = that.attr("link");
        xadmin.open('图片路径: ' + img_url, img_url);
    });
});
</script>
{% endblock content -%}
